import React from "react";
import { Button, Form, Input, Card, Select, Row, Col } from "antd";
import { useTranslation, Trans } from "react-i18next"; // 引入react-i18next
import style from "./exchange.module.scss";

export default function Exchange() {
  const { t, i18n } = useTranslation(); // 结构拿出方法
  const onFinish = (values) => {
    console.log(values);
  };
  return (
    <div className={style.exchangeboss}>
      <div className={style.exchangeForm}>
        <Card
          // title="换汇"
          title={t("layout.Exchange")}
          extra={<a href="#">More</a>}
          style={{ width: "100%", height: "100%", textAlign: "left" }}
        >
          <Form
            style={{ width: "100%" }}
            name="nest-messages"
            onFinish={onFinish}
          >
            <Row gutter={16}>
              <Col span={12}>
                <Form.Item
                  // label="子商户"
                  label={t("form.Submerchantname")}
                >
                  <Select>
                    <Select.Option value="demo">Demo</Select.Option>
                  </Select>
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  // label="锁定方"
                  label={t("form.LockingParty")}
                >
                  <Select>
                    <Select.Option value="demo">Demo</Select.Option>
                  </Select>
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={16}>
              <Col span={12}>
                <Form.Item
                  // label="卖出币种"

                  label={t("form.Sellingcurrency")}
                >
                  <Select>
                    <Select.Option value="demo">Demo</Select.Option>
                  </Select>
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  // label="付款账户"
                  label={t("form.PayAccount")}
                >
                  <Select>
                    <Select.Option value="demo">Demo</Select.Option>
                  </Select>
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={16}>
              <Col span={12}>
                <Form.Item
                  // label="买入币种"
                  label={t("form.Buycurrency")}
                >
                  <Select>
                    <Select.Option value="demo">Demo</Select.Option>
                  </Select>
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  // label="收款账户"
                  label={t("form.Collectaccount")}
                >
                  <Select>
                    <Select.Option value="demo">Demo</Select.Option>
                  </Select>
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={16}>
              <Col span={12}>
                <Form.Item
                  // label="卖出金额"
                  label={t("form.Salesamount")}
                >
                  <Input />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  label={t("form.Exchangerate")}
                  // label="汇率"
                >
                  <Input />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={16}>
              <Col span={12}>
                <Form.Item
                  label={t("form.Purchaseamount")}
                  // label="买入金额"
                >
                  <Input />
                </Form.Item>
              </Col>
              <Col span={12}></Col>
            </Row>
            <Row gutter={16}>
              <Col span={12}>
                <Form.Item>
                  <Button type="primary" htmlType="submit">
                    {/* 提交 */}
                    {t("form.Submit")}
                  </Button>
                </Form.Item>
              </Col>
              <Col span={12}></Col>
            </Row>
          </Form>
        </Card>
      </div>
    </div>
  );
}
